<template>
    <div class="mainBox">
        <!-- <div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item
                    ><a
                        href="../index.html"
                        style="font-weight: 500;font-size: 14px;"
                        >智提升</a
                    ></el-breadcrumb-item
                >
                <el-breadcrumb-item
                    ><a
                        href="index.html"
                        style="font-weight: 500;font-size: 14px;"
                        >{{ is_exam_type == 2 ? "考试" : "作业" }}</a
                    ></el-breadcrumb-item
                >
                <el-breadcrumb-item>
                    <span style="font-size: 14px;">订正错题</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <div class="title">订正错题</div>
        <div class="bodyBox">
            <div class="bodyLeft">
                <!-- 填空题 -->
                <div
                    class="topicType"
                    v-for="(item, index) in datas"
                    :key="index"
                >
                    <div v-if="currentIndex == index">
                        <div class="titleTextRow">
                            <span class="numTetx">{{ index + 1 }}.</span>
                            <el-tag effect="plain" size="mini">{{
                                item.question_type
                            }}</el-tag>
                            <div
                                class="titleText3"
                                v-html="item.question_title"
                            ></div>
                        </div>
                        <template
                            v-if="
                                item.is_sub_question == 1 &&
                                    item.answer_list &&
                                    item.answer_list.length > 0
                            "
                        >
                            <!-- 填空题 -->
                            <div v-if="item.is_many_input == 2">
                                <div
                                    v-for="(input,
                                    inputIndex) in item.answer_list"
                                    :key="inputIndex"
                                    class="input-area"
                                >
                                    <div class="serial">
                                        {{ inputIndex + 1 }}、
                                    </div>
                                    <el-input
                                        type="textarea"
                                        :disabled="input.isDisabled"
                                        :rows="4"
                                        placeholder="请输入答案"
                                        v-model="list[inputIndex]"
                                        @blur="ipcommit($event, inputIndex)"
                                    >
                                    </el-input>
                                </div>
                            </div>
                            <!-- 单选题 -->
                            <div v-if="item.is_one_choice == 2">
                                <div class="radioAnswer">
                                    <el-radio-group
                                        style="width: 100%;"
                                        v-model="radioCurrent"
                                    >
                                        <el-radio
                                            :label="
                                                item1.question_answer_id + ''
                                            "
                                            @change="radioChange($event)"
                                            class="selectItemBox"
                                            :disabled="item1.isDisabled"
                                            v-for="(item1,
                                            index1) in item.answer_list"
                                            :key="index1"
                                            :class="{
                                                isSelectItemBox:
                                                    item1.question_answer_id ==
                                                    radioCurrent
                                            }"
                                            ><div class="selectItemBox-item">
                                                <div>{{ item1.A_text }}、</div>
                                                <span
                                                    v-html="item1.answer"
                                                ></span></div
                                        ></el-radio>
                                    </el-radio-group>
                                </div>
                            </div>
                            <!-- 多选题 -->
                            <div v-if="item.question_typeid == 2">
                                <div class="radioAnswer">
                                    <el-checkbox-group
                                        style="width: 100%;"
                                        v-model="checkBoxCurrent"
                                    >
                                        <el-checkbox
                                            :label="
                                                item1.question_answer_id + ''
                                            "
                                            @change="checkChange"
                                            class="selectItemBox"
                                            :disabled="item1.isDisabled"
                                            v-for="(item1,
                                            index1) in item.answer_list"
                                            :key="index1"
                                            :class="{
                                                isSelectItemBox: item1.isactive
                                            }"
                                            ><div class="selectItemBox-item">
                                                <div>{{ item1.A_text }}、</div>
                                                <span
                                                    v-html="item1.answer"
                                                ></span></div
                                        ></el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </div>
                        </template>
                    </div>
                    <div
                        v-if="
                            datas[currentIndex].is_sub_question == 1 &&
                                datas[currentIndex].isAnaly &&
                                currentIndex == index
                        "
                    >
                        <div class="analysis1">
                            <div>
                                <div class="answer">
                                    <div class="checkAnswer">
                                        <span
                                            >你的答案：{{ item.myanswer }}</span
                                        >
                                    </div>
                                    <div class="yourAnswer">
                                        正确答案：
                                        <div v-html="item.answer"></div>
                                    </div>
                                </div>
                                <el-divider></el-divider>
                            </div>
                            <div class="analysisRow">
                                <div class="analysisTitle">答案解析</div>
                            </div>
                            <div
                                class="answerBody"
                                v-html="item.question_analysis"
                            ></div>
                        </div>
                    </div>
                </div>
                <!-- 子试题 -->
                <template v-if="datas[currentIndex].is_sub_question == 2">
                    <div
                        v-for="(item3, index3) in recodeList"
                        :key="'index3' + index3"
                    >
                        <template
                            v-if="
                                item3.f_question_id ==
                                    datas[currentIndex].question_id
                            "
                        >
                            <div
                                v-for="(item4,
                                index4) in item3.question_sub_lists"
                                :key="'index4' + index4"
                            >
                                <div v-if="childCurrentIndex == index4">
                                    <div class="titleTextRow1">
                                        <span class="numTetx"
                                            >{{ index4 + 1 }}.</span
                                        >
                                        <el-tag effect="plain" size="mini">{{
                                            item4.question_type_name
                                        }}</el-tag>
                                        <div
                                            class="titleText"
                                            v-html="item4.question_title"
                                        ></div>
                                        <div class="titleError1">
                                            <div
                                                :class="[
                                                    childCurrentIndex == index5
                                                        ? 'childCurrent1'
                                                        : 'childCurrent',
                                                    datas[currentIndex].subList[
                                                        index5
                                                    ].user_result &&
                                                    datas[currentIndex].subList[
                                                        index5
                                                    ].user_result != ''
                                                        ? 'childCurrent2'
                                                        : '',
                                                    datas[currentIndex].subList[
                                                        index5
                                                    ].user_result &&
                                                    childCurrentIndex ==
                                                        index5 &&
                                                    datas[currentIndex].subList[
                                                        index5
                                                    ].user_result != ''
                                                        ? 'childCurrent3'
                                                        : ''
                                                ]"
                                                @click="childCurrent(index5)"
                                                v-for="(item5, index5) in item3
                                                    .question_sub_lists.length"
                                                :key="index5"
                                            >
                                                {{ item5 }}
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 单选题 -->
                                    <div v-if="item4.is_one_choice == 2">
                                        <div class="radioAnswer">
                                            <el-radio-group
                                                style="width: 100%;"
                                                v-model="childRadioCurrent"
                                            >
                                                <el-radio
                                                    :label="
                                                        item6.question_answer_id +
                                                            ''
                                                    "
                                                    @change="
                                                        radioChange($event)
                                                    "
                                                    class="selectItemBox"
                                                    v-for="(item6,
                                                    index6) in item4.answer_list"
                                                    :key="index6"
                                                    :disabled="
                                                        datas[currentIndex]
                                                            .subList[
                                                            childCurrentIndex
                                                        ].answer_list[index6]
                                                            .isDisabled
                                                    "
                                                    :class="{
                                                        isSelectItemBox:
                                                            item6.question_answer_id ==
                                                            childRadioCurrent
                                                    }"
                                                    ><div
                                                        class="selectItemBox-item"
                                                    >
                                                        <div>
                                                            {{ item6.A_text }}、
                                                        </div>
                                                        <span
                                                            v-html="
                                                                item6.answer
                                                            "
                                                        ></span></div
                                                ></el-radio>
                                            </el-radio-group>
                                        </div>
                                    </div>
                                    <!-- 填空题 -->
                                    <div v-if="item4.is_many_input == 2">
                                        <div
                                            v-for="(input1,
                                            inputIndex1) in item4.answer_list"
                                            :key="inputIndex1"
                                            class="input-area"
                                        >
                                            <div class="serial">
                                                {{ inputIndex1 + 1 }}、
                                            </div>
                                            <el-input
                                                type="textarea"
                                                :rows="4"
                                                :disabled="
                                                    datas[currentIndex].subList[
                                                        childCurrentIndex
                                                    ].answer_list[inputIndex1]
                                                        .isDisabled
                                                "
                                                placeholder="请输入答案"
                                                v-model="childList[inputIndex1]"
                                                @blur="
                                                    ipcommit(
                                                        $event,
                                                        inputIndex1
                                                    )
                                                "
                                            >
                                            </el-input>
                                        </div>
                                    </div>
                                    <!-- 多选题 -->
                                    <div v-if="item4.question_typeid == 2">
                                        <div class="radioAnswer">
                                            <el-checkbox-group
                                                style="width: 100%;"
                                                v-model="childCheckBoxCurrent"
                                            >
                                                <el-checkbox
                                                    :label="
                                                        item7.question_answer_id +
                                                            ''
                                                    "
                                                    @change="checkChange"
                                                    class="selectItemBox"
                                                    :disabled="
                                                        datas[currentIndex]
                                                            .subList[
                                                            childCurrentIndex
                                                        ].answer_list[index7]
                                                            .isDisabled
                                                    "
                                                    v-for="(item7,
                                                    index7) in item4.answer_list"
                                                    :key="index7"
                                                    :class="{
                                                        isSelectItemBox:
                                                            item7.isactive
                                                    }"
                                                    ><div
                                                        class="selectItemBox-item"
                                                    >
                                                        <div>
                                                            {{ item7.A_text }}、
                                                        </div>
                                                        <span
                                                            v-html="
                                                                item7.answer
                                                            "
                                                        ></span></div
                                                ></el-checkbox>
                                            </el-checkbox-group>
                                        </div>
                                    </div>
                                    <div
                                        v-if="
                                            datas[currentIndex]
                                                .is_sub_question == 2 &&
                                                datas[currentIndex].subList[
                                                    childCurrentIndex
                                                ].isAnaly &&
                                                childCurrentIndex == index4
                                        "
                                    >
                                        <div class="analysis1">
                                            <div>
                                                <div class="answer">
                                                    <div class="checkAnswer">
                                                        <span
                                                            >你的答案：{{
                                                                datas[
                                                                    currentIndex
                                                                ].subList[
                                                                    childCurrentIndex
                                                                ].myanswer
                                                            }}</span
                                                        >
                                                    </div>
                                                    <div class="yourAnswer">
                                                        正确答案：
                                                        <div
                                                            v-html="
                                                                datas[
                                                                    currentIndex
                                                                ].subList[
                                                                    childCurrentIndex
                                                                ].answer
                                                            "
                                                        ></div>
                                                    </div>
                                                </div>
                                                <el-divider></el-divider>
                                            </div>
                                            <div class="analysisRow">
                                                <div class="analysisTitle">
                                                    答案解析
                                                </div>
                                            </div>
                                            <div
                                                class="answerBody"
                                                v-html="
                                                    datas[currentIndex].subList[
                                                        childCurrentIndex
                                                    ].question_analysis
                                                "
                                            ></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </template>

                <div class="footerBar">
                    <template v-if="datas[currentIndex].is_sub_question == 1">
                        <template v-if="!datas[currentIndex].isAnaly">
                            <div class="bottomBtu" @click="btn_check">
                                答题
                            </div>
                        </template>
                        <template v-else>
                            <div class="bottomBtu3">
                                答题
                            </div>
                        </template>
                    </template>
                    <template v-else>
                        <div v-if="datas[currentIndex].subList">
                            <template
                                v-if="
                                    !datas[currentIndex].subList[
                                        childCurrentIndex
                                    ].isAnaly
                                "
                            >
                                <div class="bottomBtu" @click="btn_check">
                                    答题
                                </div>
                            </template>
                            <template v-else>
                                <div class="bottomBtu3">
                                    答题
                                </div>
                            </template>
                        </div>
                    </template>

                    <div class="footerText">智助教育提供技术支持</div>
                </div>
            </div>
            <div class="bodyRight">
                <div class="rightBox">
                    <div class="topBox">
                        <div class="countDown">
                            <count-down
                                :show-day="false"
                                :hour="1"
                                :minute="56"
                                :second="12"
                            ></count-down>
                        </div>
                        <div class="subtimeText">
                            <i
                                class="el-icon-time"
                                style="color: #018854;margin-right: 5px;font-weight: 600;"
                            ></i
                            >总剩余时间
                        </div>
                        <div class="answerNum">
                            总题数：（{{ currentIndex + 1 }}/{{ length }})
                        </div>
                        <el-divider></el-divider>
                        <div class="optionBox">
                            <div
                                v-for="(i, index) in length"
                                class="option"
                                :key="index"
                                :class="[
                                    currentIndex == index
                                        ? 'isNowStateBox'
                                        : '',
                                    datas[index].user_result &&
                                    datas[index].user_result != ''
                                        ? 'isEDStateBox '
                                        : '',
                                    currentIndex == index &&
                                    datas[index].user_result &&
                                    datas[index].user_result != ''
                                        ? 'isEDStateBox1'
                                        : ''
                                ]"
                                @click="current(index)"
                            >
                                {{ i }}
                            </div>
                        </div>
                    </div>
                    <div class="right-bottom">
                        <div class="Tips">
                            <div class="neverBox"></div>
                            <div>未选中项</div>
                            <div class="nowBox"></div>
                            <div>选中项</div>
                            <div class="isBoxEd"></div>
                            <div>已达项</div>
                        </div>
                        <div class="moreBtn">
                            <i class="el-icon-s-tools"></i>更多设置
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { questionTypeList } from "@/api/testQuestions/type";
import {
    getQuestionList,
    getQuestionSubList
} from "@/api/testQuestions/question";
import { getCorrectList, saveRectifyanswer } from "@/api/test/exam/index";
import {
    latex_reques,
    latex_answer,
    Replace_str,
    getAnalysis
} from "@/utils/latex";
import { Base64 } from "js-base64";
import countDown from "@/components/countDown/index";
export default {
    components: {
        countDown
    },
    props: {},
    data() {
        return {
            is_exam_type: 1,
            class_log_id: "",
            question_id: "",
            name: "",
            type: "",
            bimg: "",
            save_pro: null, //进度条的累加值
            pro: null, //设计进度条的初始值
            length: null, //题目的条数
            playNum: 2, // 可播放次数
            len: 0,
            lenLong: null,
            arr: [],
            typelist: [], //题型列表
            datas: [
                {
                    is_sub_question: ""
                }
            ], //数据列表
            datas1: [],
            recodeList: [], //子试题数据列表
            currentIndex: 0, //当前题目索引
            childCurrentIndex: 0, //子试题索引
            // 填空题答案
            list: [],
            childList: [], //子试题填空题答案
            checkBoxCurrent: [], //多选题答案
            childCheckBoxCurrent: [], //子试题多选题答案
            radioCurrent: null, //单选题答案
            childRadioCurrent: null, //子试题单选题答案
            isDisabled: false, //按钮是否禁用
            show_alter: false, //交卷弹窗
            dialogTableVisible: true,
            loading: null //交卷加载
        };
    },
    computed: {},
    watch: {
        currentIndex(newVal) {
            if (newVal) {
                this.current(newVal);
            }
        },
        childCurrentIndex(newVal) {
            if (newVal) {
                this.childCurrent(newVal);
            }
        }
    },
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）

        // this.user_log_id = this.$route.query.user_log_id;
        // this.type = Number(this.$route.query.type);
        this.class_log_id = this.$route.query.class_log_id;
        console.log("class_log_id>>>>>>>", this.class_log_id);
        this.is_exam_type = Number(this.$route.query.is_exam_type);
        this.getType();

        // user_log_id 3853
    },
    methods: {
        getType() {
            questionTypeList({}).then(res => {
                if (res.code == 200) {
                    this.typelist = res.data;
                    this.getlist();
                }
            });
        },
        getlist() {
            var data = {
                class_log_id: this.class_log_id
            };
            getCorrectList(data).then(res => {
                console.log("res", res);
                if (res.code == 200) {
                    this.question_id = res.data.qustionList_str;
                    var count = res.data.qustionList.length;
                    if (this.question_id == "") {
                        this.$message.error("没数据");
                        return;
                    }
                    var testData = {
                        question_id: this.question_id,
                        is_get_answer: 2,
                        page: 1,
                        pagesize: count
                    };
                    getQuestionList(testData).then(res => {
                        if (res.code == 200) {
                            let data = res.data.data;

                            this.datas1 = data;
                            if (data[0].question_typeid == 11) {
                                this.bimg = data[0].question_photo[0];
                            }
                            latex_reques(data, "question_title"); //解析 试题标题 latex 公式转换
                            latex_reques(data, "question_analysis"); //解析 试题解析 latex 公式转换
                            for (var i = 0; i < data.length; i++) {
                                if (data[i].is_sub_question == 2) {
                                    data[i].answer_list = [];
                                }
                            }
                            latex_answer(data, "answer_list"); //解析答案选项 latex 公式转换
                            var task = [];
                            for (let i = 0; i < data.length; i++) {
                                var arr = {};
                                arr.question_analysis =
                                    data[i].question_analysis;
                                arr.is_sub_question = data[i].is_sub_question;
                                arr.index = i + 1;
                                arr.question_typeid = data[i].question_typeid;
                                arr.question_title = data[i].question_title;
                                arr.answer_list = data[i].answer_list;
                                arr.question_id = data[i].question_id;
                                arr.interest_lists_log = [];
                                task.push(arr);
                            }
                            this.datas = task;
                            this.datas = getAnalysis(this.datas);
                            for (let i = 0; i < this.datas.length; i++) {
                                for (let j = 0; j < this.datas1.length; j++) {
                                    if (
                                        this.datas[i].question_id ==
                                        this.datas1[j].question_id
                                    ) {
                                        this.datas[i].answer_list = this.datas1[
                                            j
                                        ].answer_list;
                                        this.datas[i].subList = [];
                                        this.datas[i].isAnaly = false;
                                        this.datas[i].isAnswer = false;
                                        this.datas[i].myanswer = "";
                                        this.datas[i].AnswerS = [];
                                        this.datas[i].imagePaths = [];
                                        // 处理题型
                                        this.typelist.forEach(item => {
                                            if (
                                                item.question_type_id ==
                                                this.datas[i].question_typeid
                                            ) {
                                                this.datas[i].question_type =
                                                    item.question_type_name;
                                                return;
                                            }
                                        });
                                        this.datas[
                                            i
                                        ].question_photo = this.datas1[
                                            j
                                        ].question_photo;
                                        this.datas[i].stem_audio = this.datas1[
                                            j
                                        ].stem_audio;
                                        this.datas[i].is_h_b = this.datas1[
                                            j
                                        ].is_h_b;
                                        this.datas[i].is_l_x = this.datas1[
                                            j
                                        ].is_l_x;
                                        this.datas[
                                            i
                                        ].is_many_choice = this.datas1[
                                            j
                                        ].is_many_choice;
                                        this.datas[
                                            i
                                        ].is_many_input = this.datas1[
                                            j
                                        ].is_many_input;
                                        this.datas[
                                            i
                                        ].is_one_choice = this.datas1[
                                            j
                                        ].is_one_choice;
                                        this.datas[
                                            i
                                        ].is_one_input = this.datas1[
                                            j
                                        ].is_one_input;
                                        this.datas[i].is_t_x = this.datas1[
                                            j
                                        ].is_t_x;
                                        this.datas[i].is_sub = this.datas1[
                                            j
                                        ].is_sub;
                                    }
                                }
                            }
                            var f_question_id = res.data.f_question_string;
                            this.getSubList(f_question_id);
                            this.save_pro = (1 / this.datas.length) * 100;
                            this.pro = this.save_pro;
                            this.length = this.datas.length;
                            /**
                             * 给数据答案选项添加ABCD...
                             */
                            for (let j = 0; j < this.datas.length; j++) {
                                this.datas[j].errorNum = 1;
                                for (
                                    let i = 0;
                                    i < this.datas[j].answer_list.length;
                                    i++
                                ) {
                                    var str = "A";
                                    var code = str.charCodeAt();
                                    code = code + i;
                                    var str2 = String.fromCharCode(code);
                                    this.datas[j].answer_list[
                                        i
                                    ].name = Replace_str(
                                        this.datas[j].answer_list[i].answer,
                                        "class=img",
                                        "class=img_base"
                                    );
                                    this.datas[j].answer_list[i].A_text = str2;
                                    this.datas[j].answer_list[
                                        i
                                    ].isDisabled = false;
                                }
                            }
                            console.log("试题", this.datas);
                            this.$forceUpdate();
                        }
                    });
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        getSubList(parent_question_id) {
            if (parent_question_id != "") {
                getQuestionSubList({
                    parent_question_id: parent_question_id,
                    is_get_answer: 2
                }).then(res => {
                    if (res.code == 200) {
                        var redList = res.data;
                        for (var i = 0; i < redList.length; i++) {
                            var data = redList[i].question_sub_lists;
                            this.lenLong = redList[0].question_sub_lists.length;

                            latex_reques(data, "question_title"); //解析 试题标题 latex 公式转换
                            latex_reques(data, "question_analysis"); //解析 试题解析 latex 公式转换
                            latex_answer(data, "answer_list"); //解析答案选项 latex 公式转换

                            for (var j = 0; j < this.datas.length; j++) {
                                if (
                                    this.datas[j].question_id ==
                                    redList[i].f_question_id
                                ) {
                                    this.datas[j].subList =
                                        redList[i].question_sub_lists;
                                    for (
                                        var y = 0;
                                        y < this.datas[j].subList.length;
                                        y++
                                    ) {
                                        this.datas[j].subList[
                                            y
                                        ].interest_lists_log = [];
                                    }
                                    var datas1 = JSON.parse(
                                        JSON.stringify(this.datas[j])
                                    );
                                    this.datas[j].subList = getAnalysis(
                                        this.datas[j].subList
                                    );
                                    for (
                                        let m = 0;
                                        m < this.datas[j].subList.length;
                                        m++
                                    ) {
                                        this.datas[j].subList[
                                            m
                                        ].isAnaly = false;
                                        this.datas[j].subList[
                                            m
                                        ].isAnswer = false;
                                        this.datas[j].subList[
                                            m
                                        ].imagePaths = [];
                                        this.datas[j].subList[m].myanswer = "";
                                        this.datas[j].subList[m].AnswerS = [];
                                        this.datas[j].subList[
                                            m
                                        ].imagePaths = [];
                                        this.datas[j].subList[
                                            m
                                        ].user_result = [];
                                        this.datas[j].subList[m].stem_audio =
                                            datas1.subList[m].stem_audio;
                                        this.datas[j].subList[m].is_h_b =
                                            datas1.subList[m].is_h_b;
                                        this.datas[j].subList[m].is_l_x =
                                            datas1.subList[m].is_l_x;
                                        this.datas[j].subList[
                                            m
                                        ].is_many_choice =
                                            datas1.subList[m].is_many_choice;
                                        this.datas[j].subList[m].is_many_input =
                                            datas1.subList[m].is_many_input;
                                        this.datas[j].subList[m].is_one_choice =
                                            datas1.subList[m].is_one_choice;
                                        this.datas[j].subList[m].is_one_input =
                                            datas1.subList[m].is_one_input;
                                        this.datas[j].subList[m].is_t_x =
                                            datas1.subList[m].is_t_x;
                                        this.datas[j].subList[m].is_sub =
                                            datas1.subList[m].is_sub;

                                        for (
                                            let n = 0;
                                            n <
                                            this.datas[j].subList[m].answer_list
                                                .length;
                                            n++
                                        ) {
                                            var str = "A";
                                            var code = str.charCodeAt();
                                            code = code + n;
                                            var str2 = String.fromCharCode(
                                                code
                                            );
                                            this.datas[j].subList[
                                                m
                                            ].answer_list[n].name = Replace_str(
                                                this.datas[j].subList[m]
                                                    .answer_list[n].answer,
                                                "class=img",
                                                "class=img_base"
                                            );
                                            this.datas[j].subList[
                                                m
                                            ].answer_list[n].A_text = str2;
                                            this.datas[j].subList[
                                                m
                                            ].answer_list[n].isDisabled = false;
                                        }
                                    }
                                    this.$forceUpdate();
                                }
                            }
                        }
                        this.recodeList = redList;
                        console.log("子试题数据", this.recodeList);
                    }
                });
            }
        },
        // 切换题目
        current(index) {
            // 提交填空题答案
            this.currentIndex = index;
            this.childCurrentIndex = 0;
            this.list = [];
            this.radioCurrent = null;
            // 填空题
            if (this.datas[this.currentIndex].is_many_input == 2) {
                if (this.datas[this.currentIndex].user_result) {
                    this.list = this.datas[this.currentIndex].user_result;
                }
            }
            //单选题
            if (this.datas[this.currentIndex].is_one_choice == 2) {
                if (this.datas[this.currentIndex].user_result) {
                    this.radioCurrent = this.datas[
                        this.currentIndex
                    ].user_result;
                }
            }
            //多选题
            if (this.datas[this.currentIndex].question_typeid == 2) {
                if (this.datas[this.currentIndex].user_result) {
                    this.checkBoxCurrent = this.datas[
                        this.currentIndex
                    ].user_result;
                }
            }
        },
        // 子试题切换题目
        childCurrent(index) {
            // 提交填空题答案
            this.childCurrentIndex = index;
            //单选题
            if (
                this.datas[this.currentIndex].subList[this.childCurrentIndex]
                    .is_one_choice == 2
            ) {
                if (
                    this.datas[this.currentIndex].subList[
                        this.childCurrentIndex
                    ].user_result
                ) {
                    this.childRadioCurrent = this.datas[
                        this.currentIndex
                    ].subList[this.childCurrentIndex].user_result;
                }
            }
            // 填空题
            if (
                this.datas[this.currentIndex].subList[this.childCurrentIndex]
                    .is_many_input == 2
            ) {
                if (
                    this.datas[this.currentIndex].subList[
                        this.childCurrentIndex
                    ].user_result
                ) {
                    this.childList = this.datas[this.currentIndex].subList[
                        this.childCurrentIndex
                    ].user_result;
                }
            }
            // 多选题
            if (
                this.datas[this.currentIndex].subList[this.childCurrentIndex]
                    .question_typeid == 2
            ) {
                if (
                    this.datas[this.currentIndex].subList[
                        this.childCurrentIndex
                    ].user_result
                ) {
                    this.childCheckBoxCurrent = this.datas[
                        this.currentIndex
                    ].subList[this.childCurrentIndex].user_result;
                }
            }
        },
        /* 单选题 & 判断题 */
        radioChange(evt) {
            var answer_list = "";
            if (this.datas[this.currentIndex].is_sub_question == 2) {
                answer_list = this.datas[this.currentIndex].subList[
                    this.childCurrentIndex
                ].answer_list;
                this.datas[this.currentIndex].subList[
                    this.childCurrentIndex
                ].user_result = evt; //保存用户答案
            } else {
                answer_list = this.datas[this.currentIndex].answer_list;
                this.datas[this.currentIndex].user_result = evt; //保存用户答案
            }

            for (let i = 0; i < answer_list.length; i++) {
                answer_list[i].isactive = false;
                if (answer_list[i].question_answer_id === Number(evt)) {
                    answer_list[i].isactive = true;
                }
            }
            let leng = answer_list.length;
            answer_list.splice(leng);
            this.commitaw(1);
        },
        // 多选提交答案
        checkChange() {
            var saveanswer = null; //保存用户答案到数组
            if (this.datas[this.currentIndex].is_sub_question == 2) {
                saveanswer = this.childCheckBoxCurrent;
            } else {
                saveanswer = this.checkBoxCurrent;
            }
            var question_answer_id = saveanswer.sort();
            var answer_list = "";
            this.datas[this.currentIndex].user_result = question_answer_id;
            if (this.datas[this.currentIndex].is_sub_question == 2) {
                answer_list = this.datas[this.currentIndex].subList[
                    this.childCurrentIndex
                ].answer_list;
            } else {
                answer_list = this.datas[this.currentIndex].answer_list;
            }

            for (let i = 0; i < answer_list.length; i++) {
                answer_list[i].isactive = false;
                for (let j = 0; j < question_answer_id.length; j++) {
                    if (
                        answer_list[i].question_answer_id ==
                        Number(question_answer_id[j])
                    ) {
                        answer_list[i].isactive = true;
                    }
                }
            }
            answer_list.splice(answer_list.length);
            console.log("datas", this.datas[this.currentIndex]);
            this.commitaw(1);
        },
        // 填空题
        ipcommit(e, index) {
            this.arr[index] = e.target.value.trim();
            if (this.datas[this.currentIndex].is_sub_question == 2) {
                this.datas[this.currentIndex].subList[
                    this.childCurrentIndex
                ].isPost = true;
                this.datas[this.currentIndex].subList[
                    this.childCurrentIndex
                ].user_result = this.arr;
            } else {
                this.datas[this.currentIndex].isPost = true;
                this.datas[this.currentIndex].user_result = this.arr;
            }
        },
        /* 提交答案 */
        commitaw(type) {
            var question_id = this.datas[this.currentIndex].question_id;
            var sub_id = "";
            var answer = "";
            var requestParams = {};
            if (this.datas[this.currentIndex].is_sub_question == 1) {
                answer = this.datas[this.currentIndex].user_result;
            } else if (this.datas[this.currentIndex].is_sub_question == 2) {
                answer = this.datas[this.currentIndex].subList[
                    this.childCurrentIndex
                ].user_result;
            }
            if (this.datas[this.currentIndex].is_sub_question == 1) {
                let typeid = this.datas[this.currentIndex].question_typeid;
                if (
                    this.datas[this.currentIndex].is_one_choice == 2 ||
                    this.datas[this.currentIndex].is_many_choice == 2
                ) {
                    if (typeid != 3) {
                        let answerStr = "";
                        for (
                            let i = 0;
                            i <
                            this.datas[this.currentIndex].answer_list.length;
                            i++
                        ) {
                            if (
                                (answer + "").indexOf(
                                    this.datas[this.currentIndex].answer_list[i]
                                        .question_answer_id
                                ) != -1
                            ) {
                                answerStr += this.datas[this.currentIndex]
                                    .answer_list[i].A_text;
                            }
                        }
                        this.datas[this.currentIndex].myanswer = answerStr;
                    } else {
                        for (
                            let i = 0;
                            i <
                            this.datas[this.currentIndex].answer_list.length;
                            i++
                        ) {
                            if (
                                answer ==
                                this.datas[this.currentIndex].answer_list[i]
                                    .question_answer_id
                            ) {
                                this.datas[
                                    this.currentIndex
                                ].myanswer = this.datas[
                                    this.currentIndex
                                ].answer_list[i].answer;
                            }
                        }
                    }
                } else if (this.datas[this.currentIndex].is_h_b == 2) {
                    this.datas[this.currentIndex].AnswerS = this.datas[
                        this.currentIndex
                    ].imagePaths;
                } else {
                    if (this.datas[this.currentIndex].user_result.length > 0) {
                        for (
                            let m = 0;
                            m <
                            this.datas[this.currentIndex].user_result.length;
                            m++
                        ) {
                            if (this.datas[this.currentIndex].myanswer) {
                                //答案数组已经有缓存的数据
                                if (
                                    this.datas[this.currentIndex].user_result[m]
                                ) {
                                    if (
                                        this.datas[this.currentIndex].myanswer
                                    ) {
                                        //这个空答题了
                                        this.datas[
                                            this.currentIndex
                                        ].myanswer +=
                                            "......" +
                                            this.datas[this.currentIndex]
                                                .user_result[m];
                                    } else {
                                        this.datas[
                                            this.currentIndex
                                        ].myanswer = this.datas[
                                            this.currentIndex
                                        ].user_result[m];
                                    }
                                } else {
                                    this.datas[this.currentIndex].myanswer +=
                                        "......" + "没答题";
                                }
                            } else {
                                //答案数组已经还没有缓存的数据
                                if (
                                    this.datas[this.currentIndex].user_result[m]
                                ) {
                                    if (
                                        this.datas[this.currentIndex].myanswer
                                    ) {
                                        this.datas[
                                            this.currentIndex
                                        ].myanswer += this.datas[
                                            this.currentIndex
                                        ].user_result[m];
                                    } else {
                                        this.datas[
                                            this.currentIndex
                                        ].myanswer = this.datas[
                                            this.currentIndex
                                        ].user_result[m];
                                    }
                                } else {
                                    this.datas[this.currentIndex].myanswer +=
                                        "没答题";
                                }
                            }
                        }
                    }
                }
            } else if (this.datas[this.currentIndex].is_sub_question == 2) {
                sub_id = this.datas[this.currentIndex].subList[
                    this.childCurrentIndex
                ].question_id;
                let typeid = this.datas[this.currentIndex].subList[
                    this.childCurrentIndex
                ].question_typeid;
                if (
                    this.datas[this.currentIndex].subList[
                        this.childCurrentIndex
                    ].is_one_choice == 2 ||
                    this.datas[this.currentIndex].subList[
                        this.childCurrentIndex
                    ].is_many_choice == 2
                ) {
                    if (typeid != 3) {
                        let answerStr = "";
                        for (
                            var i = 0;
                            i <
                            this.datas[this.currentIndex].subList[
                                this.childCurrentIndex
                            ].answer_list.length;
                            i++
                        ) {
                            if (
                                (answer + "").indexOf(
                                    this.datas[this.currentIndex].subList[
                                        this.childCurrentIndex
                                    ].answer_list[i].question_answer_id
                                ) != -1
                            ) {
                                answerStr += this.datas[this.currentIndex]
                                    .subList[this.childCurrentIndex]
                                    .answer_list[i].A_text;
                            }
                        }
                        this.datas[this.currentIndex].subList[
                            this.childCurrentIndex
                        ].myanswer = answerStr;
                    } else {
                        for (
                            let i = 0;
                            i <
                            this.datas[this.currentIndex].subList[
                                this.childCurrentIndex
                            ].answer_list.length;
                            i++
                        ) {
                            if (
                                answer ==
                                this.datas[this.currentIndex].subList[
                                    this.childCurrentIndex
                                ].answer_list[i].question_answer_id
                            ) {
                                this.datas[this.currentIndex].subList[
                                    this.childCurrentIndex
                                ].myanswer = this.datas[
                                    this.currentIndex
                                ].subList[this.childCurrentIndex].answer_list[
                                    i
                                ].answer;
                            }
                        }
                    }
                } else if (this.datas[this.currentIndex].is_h_b == 2) {
                    this.datas[this.currentIndex].subList[
                        this.childCurrentIndex
                    ].AnswerS = this.datas[this.currentIndex].subList[
                        this.childCurrentIndex
                    ].imagePaths;
                } else {
                    if (
                        this.datas[this.currentIndex].subList[
                            this.childCurrentIndex
                        ].user_result.length > 0
                    ) {
                        for (
                            var m = 0;
                            m <
                            this.datas[this.currentIndex].subList[
                                this.childCurrentIndex
                            ].user_result.length;
                            m++
                        ) {
                            if (
                                this.datas[this.currentIndex].subList[
                                    this.childCurrentIndex
                                ].myanswer
                            ) {
                                //答案数组已经有缓存的数据
                                if (
                                    this.datas[this.currentIndex].subList[
                                        this.childCurrentIndex
                                    ].user_result[m]
                                ) {
                                    //这个空答题了
                                    this.datas[this.currentIndex].subList[
                                        this.childCurrentIndex
                                    ].myanswer +=
                                        "......" +
                                        this.datas[this.currentIndex].subList[
                                            this.childCurrentIndex
                                        ].user_result[m];
                                } else {
                                    this.datas[this.currentIndex].subList[
                                        this.childCurrentIndex
                                    ].myanswer += "......" + "没答题";
                                }
                            } else {
                                //答案数组已经还没有缓存的数据
                                if (
                                    this.datas[this.currentIndex].subList[
                                        this.childCurrentIndex
                                    ].user_result[m]
                                ) {
                                    this.datas[this.currentIndex].subList[
                                        this.childCurrentIndex
                                    ].myanswer += this.datas[
                                        this.currentIndex
                                    ].subList[
                                        this.childCurrentIndex
                                    ].user_result[m];
                                } else {
                                    this.datas[this.currentIndex].subList[
                                        this.childCurrentIndex
                                    ].myanswer += "没答题";
                                }
                            }
                        }
                    }
                    answer = this.datas[this.currentIndex].subList[
                        this.childCurrentIndex
                    ].user_result;
                }
            }
            this.$forceUpdate();
            if (type == 1) {
                answer = answer.toString();
                requestParams = {
                    question_id: question_id,
                    class_log_id: this.class_log_id,
                    question_answer_id: answer
                };
            } else if (type == 2) {
                answer = answer.join("[!=!]");
                let basebase = Base64.encode(answer);
                requestParams = {
                    question_id: question_id,
                    class_log_id: this.class_log_id,
                    answer: basebase
                };
            } else if (type == 3) {
                let imagePaths = null;
                if (this.datas[this.currentIndex].is_sub_question == 2) {
                    imagePaths = this.datas[this.currentIndex].subList[
                        this.childCurrentIndex
                    ].imagePaths;
                } else {
                    imagePaths = this.datas[this.currentIndex].imagePaths;
                }
                requestParams = {
                    question_id: question_id,
                    class_log_id: this.class_log_id,
                    answer_img_list: imagePaths.join(",")
                };
            }
            if (sub_id != "") {
                requestParams.sub_question_id = sub_id;
            }
            if (
                this.datas[this.currentIndex].is_sub_question == 1 &&
                this.datas[this.currentIndex].isAnaly == false
            ) {
                saveRectifyanswer(requestParams).then(res => {
                    console.log("res", res);
                    if (res.code === 200) {
                        console.log("答题成功");
                        return;
                    }
                });
            } else if (
                this.datas[this.currentIndex].is_sub_question == 2 &&
                this.datas[this.currentIndex].subList[this.childCurrentIndex]
                    .isAnaly == false
            ) {
                console.log("答题参数", requestParams);
                saveRectifyanswer(requestParams).then(res => {
                    console.log("res", res);
                    if (res.code === 200) {
                        console.log("答题成功");
                        return;
                    }
                });
            }
        },
        // 答题
        btn_check() {
            if (this.datas[this.currentIndex].is_sub_question == 1) {
                if (this.datas[this.currentIndex].isPost) {
                    this.commitaw(2);
                }
                this.datas[this.currentIndex].isAnaly = true;
                this.datas[this.currentIndex].isAnswer = true;
                for (
                    let i = 0;
                    i < this.datas[this.currentIndex].answer_list.length;
                    i++
                ) {
                    this.datas[this.currentIndex].answer_list[
                        i
                    ].isDisabled = true;
                }
            } else if (this.datas[this.currentIndex].is_sub_question == 2) {
                if (
                    this.datas[this.currentIndex].subList[
                        this.childCurrentIndex
                    ].isPost
                ) {
                    this.commitaw(2);
                }
                this.datas[this.currentIndex].subList[
                    this.childCurrentIndex
                ].isAnaly = true;
                this.datas[this.currentIndex].subList[
                    this.childCurrentIndex
                ].isAnswer = true;

                for (
                    let i = 0;
                    i <
                    this.datas[this.currentIndex].subList[
                        this.childCurrentIndex
                    ].answer_list.length;
                    i++
                ) {
                    this.datas[this.currentIndex].subList[
                        this.childCurrentIndex
                    ].answer_list[i].isDisabled = true;
                }
            }
            console.log("试题", this.datas);
            this.$forceUpdate();
        }
    }
};
</script>

<style lang="scss" scoped>
@import "../../synchronization/startPracticing/answerCard/common.scss";
.titleError {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #cccccc;
    margin-left: 15px;
    .correct {
        color: #00d5a2;
    }
    .el-rate {
        margin-left: 15px;
    }
}
.titleError1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 15px;
    .childCurrent {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #9ea4b0;
        margin-left: 10px;
    }
    .childCurrent1 {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #3980ed;
        margin-left: 10px;
    }
    .childCurrent2 {
        background-color: #18db60;
        color: #ffffff;
    }
    .childCurrent3 {
        box-shadow: 0 0 8px #3980ed;
    }
    .el-rate {
        margin-left: 15px;
    }
}
.input-area {
    margin-top: 20px;
    .serial {
        margin-bottom: 5px;
    }
}

.mainBox {
    width: 100%;
    padding: 26px;
    box-sizing: border-box;
    .title {
        font-size: 20px;
        color: #2d3440;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}
.bodyBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}
.bodyLeft {
    width: 781px;
    min-height: 632px;
    background: #ffffff;
    border-radius: 8px;
    padding: 23px 30px;
    padding-bottom: 100px;
    box-sizing: border-box;
    flex-grow: 2;
    margin-right: 25px;
    position: relative;
    .el-tag--plain {
        color: #018854;
        border-color: #018854;
    }
}
.numTetx {
    font-size: 16px;
    font-weight: 500;
    color: #018854;
}
.numTitle1 {
    font-size: 22px;
    color: #2d3440;
    margin-right: 5px;
}
.pText {
    margin-top: 20px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #2d3440;
}
.uploadNote {
    font-size: 16px;
    font-weight: 400;
    color: #2d3440;
    margin-top: 30px;
}
.uploadBox {
    width: 104px;
    height: 104px;
    background: #f5fcff;
    border: 1px solid #ebeff5;
    border-radius: 2px;
    margin: 20px 0 60px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #6d7785;
    cursor: pointer;
}
.titleText {
    font-size: 16px;
    font-weight: 600;
    color: #2d3440;
    margin-left: 8px;
}
.fraction {
    font-size: 16px;
    color: #9ea4b0;
}
.selectBox {
    margin-top: 32px;
    width: 100%;
    .el-radio__input {
        &.is-checked {
            .el-radio__inner {
                border-color: #18db60;
                background-color: #18db60;
            }
            & + .el-radio__label {
                color: #18db60;
            }
        }
    }
}
.selectBox1 {
    margin: 32px 0px;
    width: 100%;
    display: flex;
    align-items: center;
}
.selectItemBox {
    width: 100%;
    border: 1px solid #dadfe6;
    border-radius: 8px;
    padding: 10px 15px;
    box-sizing: border-box;
    margin-bottom: 30px;
    cursor: pointer;
    &:hover {
        background-color: #f9f9f9;
    }
}
.isSelectItemBox {
    border: 1px solid #18db60;
}
.footerBar {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 10px;
}
.bottomBtu {
    width: 440px;
    height: 40px;
    background: #018854;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: #ffffff;
    margin: 0 auto;
    cursor: pointer;
}
.bottomBtu3 {
    width: 440px;
    height: 40px;
    background: rgba(0, 170, 91, 0.2);
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: #ffffff;
    margin: 0 auto;
    cursor: pointer;
}
.btnGround {
    width: 510px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.bottomBtu1 {
    width: 251px;
    height: 40px;
    background: #ffffff;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    border: 1px solid #3980ed;
    color: #3980ed;
    cursor: pointer;
}
.bottomBtu2 {
    width: 251px;
    height: 40px;
    background: #018854;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
}
.footerText {
    font-size: 12px;
    color: #9ea4b0;
    margin-top: 8px;
}
.bodyRight {
    width: 379px;
    min-width: 379px;
    flex-grow: 0;
    .rightBox {
        background-color: #ffffff;
        border-radius: 8px;
        height: 630px;
        position: relative;
    }
    .topBox {
        padding: 24px;
        box-sizing: border-box;
    }
}
.countDown {
    font-size: 44px;
    font-weight: bold;
    line-height: 20px;
    color: #ffa442;
    text-align: center;
}
.subtimeText {
    margin-top: 20px;
    font-size: 15px;
    font-weight: 400;
    color: #6d7785;
    text-align: center;
}
.answerNum {
    margin-top: 5px;
    font-size: 17px;
    font-weight: 400;
    color: #9ea4b0;
    text-align: center;
}
.optionBox {
    display: flex;
    flex-wrap: wrap;
}
.option {
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #9ea4b0;
    opacity: 1;
    border-radius: 2px;
    cursor: pointer;
    margin: 10px 12px;
    &:hover {
        border-color: #018854;
    }
}
.Tips {
    width: 379px;
    height: 16px;
    line-height: 16px;
    display: flex;
    font-size: 12px;
    color: #9ea4b0;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    div {
        margin: 0 5px;
    }
}
.neverBox {
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
    border-radius: 2px;
}
.nowBox {
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 1px solid #3980ed;
    border-radius: 2px;
}
.isBoxEd {
    width: 16px;
    height: 16px;
    background: #18db60;
    border-radius: 2px;
}
.moreBtn {
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background: #ebeff5;
    opacity: 1;
    border-radius: 0px 0px 8px 8px;
    font-size: 14px;
    color: #6d7785;
    cursor: pointer;
}
/* 选择状态 */
.isNowStateBox {
    border-color: #3980ed;
}
.isEDStateBox {
    background-color: #18db60;
    color: #ffffff;
}
.isEDStateBox1 {
    box-shadow: 0 0 8px #3980ed;
}
.right-bottom {
    position: absolute;
    bottom: 0px;
}

// 单选题
.radioAnswer {
    margin-top: 30px;
}
.selectItemBox {
    width: 100%;
    border: 1px solid #dadfe6;
    border-radius: 8px;
    padding: 10px 15px;
    box-sizing: border-box;
    margin-bottom: 30px;
    cursor: pointer;
    display: flex;

    &:hover {
        background-color: #f9f9f9;
    }
}

.isSelectItemBox {
    border: 1px solid #18db60;
}
.selectItemBox-item {
    display: flex;
    align-items: center;
}
</style>
